/**
 * page模板
 * 使用时修改 `Temp` 为对应的page名
 */

import Taro, { Config, showModal, showToast,Component  } from '@tarojs/taro';
import { View, ScrollView, Image, Text, Navigator, } from '@tarojs/components';
import './index.scss';

import NavigationBar from '../../../components/navigationBar/index';
import { getUserRoll } from '../../../services/user';

import UserRollItem from '../../../components/user-roll-item';

// 推到state中的类型，所以state中的初始参数用as的方式来指定类型

export default class Index extends Component {
  config = {
    navigationBarTitleText: '我的优惠券',
  };

  state = {
    userRollList: [],
    page: 1,
    page_number: 20,
    noMore: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  };
  componentWillMount() {
    this.getUserRollList(true);
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  onReachBottom() {
    this.getUserRollList();
  }

  getUserRollList = async isRefresh => {
    const { page, page_number, noMore } = this.state;
    let _noMore = noMore;
    let _page = page;
    if (isRefresh) {
      this.setState({
        page: 1,
        noMore: false,
        userRollList: [],
      });
      _page = 1;
      _noMore = false;
    }
    if (_noMore) {
      // showTips('没有更多数据了');
      return;
    }
    const  data  = await getUserRoll( {page:_page, page_number});
   
    if (data.list.length < page_number) {
      _noMore = true;
    } else {
      _page++;
    }
    this.setState(prevState => ({
      noMore: _noMore,
      page: _page,
      userRollList: [...prevState.userRollList, ...data.list],
    }));
  };

  useRoll = async id => {
    // const res = await showModal({
    //   // title: '你确定要使用该特殊券吗',
    //   content: `特殊券需在店员协助下使用，您确定要消耗吗？`,
    //   confirmColor: '#b0272b',
    // });
    // if (res.confirm) {
    //   await useUserRoll(id);
    //   showSuccessTips('使用成功');
    //   this.setState({
    //     userRollList: this.state.userRollList.filter(item => item.user_coupon_id !== id),
    //   });
    // }
  };

  render() {
    const { userRollList } = this.state;
    return (
        <View className="user-roll" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="我的优惠券" />
        <ScrollView className='scroll'>
          <UserRollItem list={userRollList} useRoll={this.useRoll} />
        </ScrollView>
        <View className='user-roll-bottom'>
          <View className='user-roll-bottom-item'>没有更多优惠券了</View>
          <View className='line'></View>
          <Navigator hoverClass='none' url={`/subPackageWork/pages/user-roll-time/index`}>
            <View className='user-roll-bottom-item-right'>
              <Text className='user-roll-bottom-item-text'>查看已失效的券</Text>
            </View>
          </Navigator>
        </View>
      </View>
    );
  }
}
